<template>
  <div class="infoBox">
    <div @click="goBack" class="flexBack">
      <img src="../../assets/image/zxl/fanhui.png" style="width: 8px;height: 12px;margin-right: 4px;">
      <span>返回</span>
    </div>
    <div class="infoTop">
      <div class="top_left">
        <div class="top_name">
          {{ userInfo.name }}
        </div>
        <div class="top_work">
          {{ userInfo.dept_name }} | {{ userInfo.position ? userInfo.position : '暂无岗位' }} | {{ userInfo.job_status == 1
            ? '试用' : (userInfo.job_status == 2 ? '正式' : (userInfo.job_status == 3 ? '待离职' : '离职')) }}
        </div>
        <div class="top_phone">
          <img src="../../assets/image/zxl/shoujihao.png" style="width: 13px;height: 17px;margin-right: 4px;">
          <span>{{ userInfo.mobile }}</span>
        </div>
      </div>
      <div class="top_entry">
        <button v-if="userInfo.job_status == 1" @click="open = true">办理转正</button>
        <button v-if="userInfo.job_status == 2" @click="open1 = true">办理离职</button>
        <button v-if="userInfo.job_status == 3" @click="confirmResign">确认离职</button>
      </div>
      <div class="top_drop">
        <el-dropdown>
          <el-button type="primary">
            更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="userInfo.job_status != 4" @click="goWanshan(userInfo.id)">邀请完善信息</el-dropdown-item>
              <el-dropdown-item v-if="userInfo.job_status == 1" @click="open1 = true">办理离职</el-dropdown-item>
              <el-dropdown-item v-if="userInfo.job_status == 3" @click="revokeResign">撤销离职</el-dropdown-item>
              <el-dropdown-item @click="deleteUser">删除员工</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="top_right">
        <span>账号状态：</span>
        <el-switch v-model="userInfo.is_enable" :active-value="1" :inactive-value="0"
          style="--el-switch-on-color: #01509f;" @change="changeStatus($event, userInfo.is_enable)" />
      </div>
    </div>

    <div class="infoMain">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="one">
          <Basic ref="basicCom" :user="userInfo" @updateData="getUserInfo" />
        </el-tab-pane>
        <el-tab-pane label="入职信息" name="two">
          <Entry ref="entryCom" :user="userInfo" @updateData="getUserInfo" />
        </el-tab-pane>
        <el-tab-pane label="在职信息" name="three">
          <Job ref="jobCom" :user="userInfo" @updateData="getUserInfo" />
        </el-tab-pane>
        <el-tab-pane label="离职信息" name="four">
          <Resign ref="resignCom" :user="userInfo" @updateData="getUserInfo" />
        </el-tab-pane>
        <el-tab-pane label="生命周期" name="five">
          <Cycle :user="userInfo" @updateData="getUserInfo"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog v-model="open" title="转正办理" width="440" :before-close="handleClose">
      <el-form ref="ruleFormRef" label-position="right" label-width="100px" :model="userInfo" :rules="rules"
        class="form-inline">
        <el-form-item class="" label="员工姓名：" prop="name">
          <el-input v-model="userInfo.name" placeholder="请输入员工姓名" disabled />
        </el-form-item>
        <el-form-item class="" label="入职日期：" prop="hired_time">
          <el-date-picker v-model="userInfo.hired_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            placeholder="请选择入职日期" disabled>
          </el-date-picker>
        </el-form-item>
        <el-form-item class="" label="转正日期：" prop="become_time">
          <el-date-picker v-model="userInfo.become_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            placeholder="请选择转正日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="" label="备注：" prop="become_desc">
          <el-input v-model="userInfo.become_desc" style="width: 309px;height: 51px;" :rows="2" type="textarea"
            placeholder="备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="open = false">取消</el-button>
          <el-button type="primary" color="#01509f" size="small" @click="changeInfo">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="open1" :title="userInfo.job_status == 2 ? '办理离职' : '确认离职'" width="440"
      :before-close="handleClose">
      <el-form ref="ruleFormRef1" label-position="right" label-width="100px" :model="userInfo" :rules="rules1"
        class="form-inline">
        <el-form-item class="" label="员工姓名：" prop="name">
          <el-input v-model="userInfo.name" placeholder="请输入员工姓名" disabled />
        </el-form-item>
        <el-form-item class="" label="入职日期：" prop="hired_time">
          <el-date-picker v-model="userInfo.hired_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            placeholder="请选择入职日期" disabled>
          </el-date-picker>
        </el-form-item>
        <el-form-item class="" label="离职日期：" prop="resign_time">
          <el-date-picker v-model="userInfo.resign_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            placeholder="请选择离职日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="" prop="resign_type" label="离职类型：">
          <el-select v-model="userInfo.resign_type" placeholder="请选择离职类型" @change="changeReason">
            <el-option v-for="item in quitTypeOptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="" prop="resign_reason" label="离职原因：">
          <el-select v-model="userInfo.resign_reason" placeholder="请选择离职原因">
            <el-option v-for="item in quitReasonOption" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="" label="备注：" prop="resign_desc">
          <el-input v-model="userInfo.resign_desc" style="width: 309px;height: 51px;" :rows="2" type="textarea"
            placeholder="备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="open1 = false">取消</el-button>
          <el-button type="primary" color="#01509f" size="small" @click="changeInfo1">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from '@/TUIKit/adapter-vue';
import { useRouter, useRoute } from 'vue-router';
import Basic from './components/Basic.vue';
import Cycle from './components/Cycle.vue';
import Entry from './components/Entry.vue';
import Job from './components/Job.vue';
import Resign from './components/Resign.vue';
import type { TabsPaneContext, ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { user_delete,invite_sms } from "@/api/cf";
import { become_handle, resign_handle, set_enable, user_info } from "@/api/xl";

const basicCom = ref(null)
const entryCom = ref(null)
const jobCom = ref(null)
const resignCom = ref(null)
onMounted(() => {
  getUserInfo();
  changeOpenStatus.value = true
  if (activeName == 'one' && Number(activeStatus) == 1) {
    if (basicCom.value) {
      basicCom.value.changeEdit1()
      basicCom.value.changeEdit2()
      basicCom.value.changeEdit3()
    }
  }
  if (activeName == 'two' && Number(activeStatus) == 1) {
    if (entryCom.value) {
      entryCom.value.changeEdit1()
    }
  }
  if (activeName == 'three' && Number(activeStatus) == 1) {

  }
  if (activeName == 'four' && Number(activeStatus) == 1) {
    if (resignCom.value) {
      resignCom.value.changeEdit()
    }
  }

});

// const activeName = ref('one')
const changeOpenStatus = ref(false)
const newstatus = ref(-1)
const open = ref(false)
const open1 = ref(false)
const ruleFormRef = ref(null)
const ruleFormRef1 = ref(null)
const upload_type = ref(0)
const userInfo = ref({})
const router = useRouter();
const route = useRoute();
const userId = route.params.id
const activeName = route.params.name
const activeStatus = route.params.status
const goBack = () => {
  //router.push({ name: 'employeeList' });
  router.back()
}

const quitTypeOptions = ref([
  { value: '1', name: "主动离职" },
  { value: '2', name: "被动离职" },
]);

const quitReasonOption = ref(null);

const quitReasonOption1 = ref([
  { value: '1', name: "个人原因" },
  { value: '2', name: "家庭原因" },
  { value: '3', name: "职业发展原因" },
  { value: '4', name: "其他原因" },
]);

const quitReasonOption2 = ref([
  { value: '5', name: "协议解除" },
  { value: '6', name: "无法胜任工作" },
  { value: '7', name: "试用期未通过" },
  { value: '8', name: "严重违法违纪" },
  { value: '9', name: "经济性裁员" },
  { value: '10', name: "其他原因" },
]);

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  hired_time: [{ required: true, message: "请选择入职日期", trigger: "change" }],
  become_time: [{ required: true, message: "请选择转正日期", trigger: "change" }],
})

const rules1 = reactive<FormRules>({
  name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  hired_time: [{ required: true, message: "请选择入职日期", trigger: "change" }],
  resign_time: [{ required: true, message: "请选择离职日期", trigger: "change" }],
  resign_type: [{ required: true, message: "请选择离职类型", trigger: "change" }],
  resign_reason: [{ required: true, message: "请选择离职原因", trigger: "change" }],
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const goWanshan = (id:any) => {
  ElMessageBox.confirm("提交后，系统将会发送完善信息短信链接给对应员工?", "邀请完善信息", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
      if (action === "confirm") {

      invite_sms(id).then(res => {
          if (res.code == 1) {
            ElMessage({
              message: res.msg,
              grouping: true,
              type: "success",
            });
          }
        });
      }
    });
}

const getUserInfo = () => {
  user_info(userId).then(res => {
    console.log(res);
    userInfo.value = res.data
  });
}

const changeStatus = (e, status) => {
  console.log(e)
  // if (e) {
  if (changeOpenStatus.value) {
    if (status) {
      console.log('111111111')
      newstatus.value = 1
    } else {
      console.log('000000000')
      newstatus.value = 0
    }
    set_enable({
      id: userInfo.value.id,
      is_enable: newstatus.value
    }).then(res => {
      ElMessage({
        message: res.msg,
        grouping: true,
        type: "success",
      });
      getUserInfo()
    });
  }
  // }
}

const confirmResign = () => {
  open1.value = true
  if (userInfo.value.resign_type == 1) {
    quitReasonOption.value = quitReasonOption1.value
  } else if (userInfo.value.resign_type == 2) {
    quitReasonOption.value = quitReasonOption2.value
  } else {
    quitReasonOption.value = []
  }
}

const revokeResign = () => {
  ElMessageBox.confirm("此操作将撤销当前员工的离职记录，无法恢复，请谨慎操作", "是否确认撤销离职？", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    confirmButtonClass: "ExitConfirmButton",
  }).then((action: Action) => {
    if (action === "confirm") {
      resign_handle({
        id: userInfo.value.id,
        resign_time: '',
        resign_type: '',
        resign_reason: '',
        resign_desc: '',
        job_status: 2
      }).then(res => {
        ElMessage({
          message: '撤销成功',
          grouping: true,
          type: "success",
        });
        getUserInfo()
      });
    }
  });
}

const handleClose = (done: () => void) => {
  done()
}

const changeReason = (value) => {
  console.log(value)
  if (userInfo.value.resign_type == 1) {
    quitReasonOption.value = quitReasonOption1.value
  } else if (userInfo.value.resign_type == 2) {
    quitReasonOption.value = quitReasonOption2.value
  } else {
    quitReasonOption.value = []
  }
  userInfo.value.resign_reason = ''
}

const changeInfo = () => {
  ruleFormRef.value.validate(res => {
    if (res) {
      console.log("表单验证成功");
      become_handle({
        id: userInfo.value.id,
        become_time: userInfo.value.become_time,
        become_desc: userInfo.value.become_desc
      }).then(res => {
        ElMessage({
          message: res.msg,
          grouping: true,
          type: "success",
        });
        open.value = false
        getUserInfo()
      });
    } else {
      console.log("表单验证失败");
      return false;
    }
  });
}

const changeInfo1 = () => {
  if (userInfo.value.job_status == 2 || userInfo.value.job_status == 1) {
    upload_type.value = 3
  } else if (userInfo.value.job_status == 3) {
    upload_type.value = 4
  }
  ruleFormRef1.value.validate(res => {
    if (res) {
      console.log("表单验证成功");
      resign_handle({
        id: userInfo.value.id,
        resign_time: userInfo.value.resign_time,
        resign_type: userInfo.value.resign_type,
        resign_reason: userInfo.value.resign_reason,
        resign_desc: userInfo.value.resign_desc,
        job_status: upload_type.value
      }).then(res => {
        ElMessage({
          message: res.msg,
          grouping: true,
          type: "success",
        });
        open1.value = false
        getUserInfo()
      });
    } else {
      console.log("表单验证失败");
      return false;
    }
  });
}

const deleteUser = () => {
  ElMessageBox.confirm("是否确定删除?", "操作提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    confirmButtonClass: "ExitConfirmButton",
  }).then((action: Action) => {
    if (action === "confirm") {
      user_delete(userId).then(res => {
        ElMessage({
          message: res.msg,
          grouping: true,
          type: "success",
        });
        router.push({ name: 'employeeList' });
      });
    }
  });
}
</script>

<style lang="scss">
.infoBox {
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.example-showcase .el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
}

.flexBack {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.infoTop {
  background-color: #fff;
  width: 100%;
  height: 108px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 23px;
  display: flex;
  align-items: flex-start;

  .top_left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;

    .top_name {
      font-size: 18px;
      color: #333;
      margin-bottom: 4px;
    }

    .top_work {
      font-size: 16px;
      color: #333;
      margin-bottom: 4px;
    }

    .top_phone {
      font-size: 16px;
      color: #333;
      display: flex;
      align-items: center;
    }
  }

  .top_entry {
    margin-right: 7px;

    button {
      background-color: #01509f;
      color: #fff;
      width: 108px;
      height: 36px;
      border: 0px solid #eaeaea;
      font-size: 16px;
      border-radius: 6px;
      cursor: pointer;
    }

    button:hover {
      transform: scale(1.05) !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  }

  .top_drop {
    margin-right: 29px;

    button {
      background-color: transparent;
      color: #333;
      width: 108px;
      height: 36px;
      border: 1px solid #eaeaea;
      font-size: 16px;
      border-radius: 6px;
    }

    button:hover {
      color: #fff;
    }
  }

  .top_right {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
  }
}

.infoMain {
  background-color: #fff;
  width: 100%;
  // height: 108px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 16px;

  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: #01509f;
  }

  .el-tabs__active-bar {
    background-color: #01509f;
  }

  .el-tabs__item {
    font-size: var(--el-font-size-medium);
  }
}
</style>